<template>
    <div class="detail">
        <div class="img" @click="hidden">
            <span class="back iconfont icon-fanhui3" @click="back"></span>
            <img class="topImg" :src="goodsImg" alt="">
        </div>  

        <div class="content" @click="hidden">       
            <div class="name-price">
                <p class="name">{{goodsName}}</p>
                <p class="price">
                    <span class="price-l">￥{{goodsPrice}}</span>
                    <span class="price-r">￥19.9</span>
                </p>
               
            </div>
            <div class="free">运费:免运费</div>
            <div class="scroll">
                <p class="scrollTop">评分</p>
                <van-rate v-model="value" />
            </div>
        </div>

        <div class="bottom">
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服" />
                <van-goods-action-icon icon="cart-o" text="购物车" :info="num" @click="tocart"/>
                <van-goods-action-icon icon="shop-o" text="店铺" info="12" />
                <van-goods-action-button type="warning" text="加入购物车" @click="addCart"/>
                <van-goods-action-button type="danger" text="立即购买"  @click="buy"/>
            </van-goods-action>
        </div>

        <div class="goodsSku" v-show="goodsSku" @click="hidden">

            <div @click.stop>
                <div class="content" >
                    <img class="contentImg" :src="goodsImg" alt="" >
                    <div class="contentR">
                        <p>{{goodsName}}</p>
                        <div class="price">售价:￥{{goodsPrice}}</div>
                        <p class="chose">选择商品规格</p>
                    </div>
                </div>


                <div class="sku">
                    <span class="skubox" v-for="(item,index) in skuList" :key="index" 
                    :class="{active: item==buySku}"
                    @click="choseSku(item)">{{item}}</span>
                    
                </div>

                <div class="num">
                    <span class="name">数量:</span>
                    <span class="decrease iconfont icon-jian1" @click="onDecrease"></span>
                    <span class="val">{{buyNum}}</span>
                    <span class="increase iconfont icon-jia" @click="onIncrease"></span>
                </div>

                <div class="btn">
                    <van-button type="primary" @click="btn">确定</van-button>
                </div>
            </div>
        </div>
        

    </div>
</template>

<script>
import { Toast } from 'vant'
    export default {
        data() {
            return {
                value: 3,
                goodsName:'',
                goodsImg:'',
                goodsPrice:'',
                buyNum:1,
                skuList:[],
                goodsSku:false,
                buySku:'',
                num:''
            }
        },
        methods: {
            back(){
                this.$router.back()
            },

            //点击加入购物车
            addCart(){

                //判断是否登录
                if(!this.token){
                    Toast('请登录')
                    this.$router.push('/login')
                    return false
                }
                
                this.goodsSku=true
        
            },
            tocart(){
                if(!this.token){
                    Toast('请登录')
                    this.$router.push('/login')
                    
                }else{
                    this.$router.push('/cart')
                }

            },

            //点击隐藏规格
            hidden(){
                 this.goodsSku=false;

            },

            //选择规格
            choseSku(newSku){
                  const oldSku=this.buySku

                if(!oldSku){
                    this.buySku = newSku
                }else if(oldSku == newSku){
                    this.buySku = ''
                }else{
                    this.buySku = newSku
                }
            },

            //点击增加
            onIncrease(){
                this.buyNum++
            },

            //点击减少
            onDecrease(){
                if(this.buyNum<=1){
                    Toast('数量不能少于1件')
                }else{
                    this.buyNum--
                }
            },

            //选择规格后点击确定
            btn(){
                const {buySku,buyNum,goodsId,token}=this
                
                if(!buySku){
                    Toast('请选择规格')
                   
                }else{
                    this.$axios.post('/zhouliang/api/cartinfo/t/add',{
                        buySku,
                        buyNum,
                        goodsId,
                        token
                    })
                    .then((res)=>{
                        const {msg,code}=res

                        if(code==-1){
                            Toast(msg)
                        }else if(code==-2){
                            Toast(msg)
                            this.$router.push('/login')
                        }else{
                            Toast(msg)
                            this.goodsSku=false
                        }

                    })

                }


            },

            //点击购买
            buy(){
               
                if(!this.token){
                    Toast('请登录')
                    this.$router.push('/login')
                    return false
                }

                Toast('余额不足请充值')
            },

            //获取详情信息
            reqDetail(){
                    this.$axios.post('/zhouliang/api/goodsinfo/detail',{
                    goodsId:this.goodsId
                })
                .then((res)=>{
                    console.log(res)
                    const {code,msg,info}=res
                    const {goodsImg,goodsName,goodsPrice,goodsType,goodsSkus}=info

                    this.goodsName=goodsName
                    this.goodsImg=goodsImg
                    this.goodsPrice=goodsPrice 
                    this.goodsSkus=goodsSkus
                    
                    this.skuList=goodsSkus.split(',')
                })
            },

            //获取数据渲染
          reqCartList(){
            this.$axios.post('/zhouliang/api/cartinfo/t/list',{
              token:this.token
            })
            .then((res)=>{
              const {code,list,msg}=res
            
             const num=list.length
            
            this.num=num


              const {buyNum}=list

              if(code==1){
                this.cartList=list.map(e=>({
                  ...e,
                  isChosen:false
                }))
              }else if(code==-1){
                Toast(msg)
              }else if(code==-2){
                Toast(msg)
                this.$router.push('/login')
              }

            })
          },

        },
        activated() {
            
        },
        mounted() {
            //获取商品id
            const goodsId=this.$route.params.goodsId
            this.goodsId=goodsId

            this.reqDetail()

            const token=localStorage.getItem('token')
            this.token=token
            
            this.reqCartList()
            //获取购物车里面的上面种类
            

            console.log(this.num)
        },
    }
</script>

<style lang="scss" scoped>
.detail{
    position: relative;
    .img{
        height: 6.7rem;
        position: relative;
        .topImg{
           object-fit: cover;
           width: 100vw;
           height: 6.7rem;
        
        }
        .back{
            position: absolute;
            left: 0.3rem;
            top: 0.3rem;
            font-size: 0.5rem;
            color:rgb(206, 205, 205);
        }
    }


    .content{
        padding:0 0.2rem; 
        // background-color: #fff;
            .name-price{
            
                .name{
                    padding:0.2rem 0;
                    font-size: 0.4rem;
                    font-weight: 500;
                    border-bottom: 1px solid rgb(233, 232, 230);
                }

                .price{
                    border-bottom: 1px solid rgb(233, 232, 230);
                    padding: 0.3rem 0;
                    .price-l{
                    
                    font-size: 0.4rem;
                    color: red;
                    font-weight: 600;
                    
                    }
                    .price-r{
                        margin-left: 0.2rem;
                        text-decoration:line-through;
                    }
                }

                
            }
            .free{
                padding: 0.3rem 0;
                border-bottom: 1px solid rgb(233, 232, 230);
            }
            .scroll{
                padding: 0.3rem 0;
                border-bottom: 1px solid rgb(233, 232, 230);
                .scrollTop{
                    margin-bottom: 0.1rem;
                }
            }
    }

    .goodsSku{
        position: absolute;
        left: 0;
        bottom: -2.2rem;
        width: 100vw;
        height: 5.5rem;
        background-color: rgb(245, 242, 242);
        font-size: 0.3rem;
        .content{
            display: flex;
            padding: 0.2rem 0.2rem;
            align-items: center;

            .contentImg{
                width: 2rem;
                height: 2rem;
               
            }
            .contentR{
                 margin-left: 0.2rem;
                .price{
                    padding:0.3rem 0 ;
                }
            }
        }
        .sku{
            padding-top: 0.3rem;
  
            .skubox{
                padding:0.2rem 0.5rem;
                background-color: white;
                margin:0 0.2rem;
                
                &.active{
                background-color: #3ac149;
                }
            }
             
        }

        .num{
            padding: 0.6rem 0.2rem;

            .iconfont{
                font-size: 0.3rem;
                padding:0 0.2rem;
            }
            
        }
        

        .btn{
            width: 100vw;
            display: flex;
            // align-items: center;
            justify-content: center;
            position: absolute;
            bottom: 0.2rem;
            left: 0;
            .van-button{
                background-color: #3ac149;
                width: 90%;
            
            }

        }
        
    }
    







}

</style>